<template>
  <drawer title="确认结课" :footerVisible="true" :contentHeight="840" @close="close">
    <template #content>
      <div class="course-result-wrap">
        <div class="wrap-left">
          <div class="date">{{formatNowDate}}</div>
          <div class="label">学生: {{ realTimePeopleNum }}人 教师: {{ userInfo.username }}</div>
          <div class="flag-wrap">
            <div class="txt">课堂综合评分</div>
            <div class="num">{{realTimeCourseAverageScore}}</div>
            <div class="score-wrap">
              <div class="score-item">
                <img src="@/assets/img/classroom/excellent.png" alt="优秀" />
                X{{ realTimeWordNumData.scope3 }}
              </div>
              <div class="score-item">
                <img src="@/assets/img/classroom/good.png" alt="优秀" />
                X{{ realTimeWordNumData.scope2 }}
              </div>
              <div class="score-item">
                <img src="@/assets/img/classroom/commonly.png" alt="一般" />
                X{{ realTimeWordNumData.scope1 }}
              </div>
            </div>
            <div class="txt">课程时长：{{countDownTime}}</div>
            <div class="txt">完成情况：{{ realTimeWordNumData.complete }}/{{ realTimeWordNumData.total }}</div>
          </div>
        </div>
        <div class="wrap-right">
          <div class="good-wrap">
            <div class="wrap-title">优秀作品展示</div>
            <div class="handwriting-wrap">
              <Handwriting v-for="(item, i) in realTimeSortData" :key="i" :emojiVisible="false" :image="item.writeInfo.image" :label="item.writeInfo.label" :icon="item.writeInfo.icon" />
            </div>
          </div>
          <div class="ranking-wrap">
            <div class="wrap-title">学员排行榜</div>
            <n-scrollbar style="height: calc(100% - 56px)">
              <div class="ranking-item" v-for="(item, i) in realTimeSortStudentData" :key="i">
                <div class="no" :class="'no-' + (i + 1)">{{ i < 3 ? '' : i }}</div>
                <div class="info">
                  <avatar :pic="item.studentInfo.pic" :size="32" />
                  {{ item.studentInfo.name }}
                </div>
                <div class="score">
                  {{ item.wordNum.scope3 }}
                  <img src="@/assets/img/star-yellow.png" alt="分" />
                </div>
              </div>
            </n-scrollbar>
          </div>
          <div class="analysis-wrap">
            <div class="wrap-title">练字评测分析</div>
            <div class="label">需提升字样 <span style="margin-left: 90px">智能分析</span></div>

            <n-scrollbar style="height: calc(100% - 90px)">
              <div class="analysis-item"  v-for="(item, i) in realTimeDescSortData" :key="i">
                <Handwriting :emojiVisible="false" :image="item.writeInfo.image" :label="item.writeInfo.label" :icon="item.writeInfo.icon" />
                <div class="text">
                  <span v-for="(text, j) in item.jsonData.scope.disadvantageList" :key="j">{{ text }} <i class="dh">,</i> </span>
                </div>
              </div>
            </n-scrollbar>
          </div>
        </div>
      </div>
    </template>
    <template #footer>
      <n-button size="large" @click="close">取消</n-button>
      <n-button type="primary" size="large" @click="confirm">结课</n-button>
    </template>
  </drawer>
</template>

<script setup lang="ts">
  import Handwriting from '@/views/components/Handwriting/index.vue';
  import {computed, ref} from "vue";
  import {format} from "date-fns";
  import {useUserStore} from "@/store/modules/user";

  const props = defineProps({
    realTimePeopleNum: {
      type: Number,
      default: 0
    },
    realTimeSortData: {
      type: Array,
      default: () => []
    },
    realTimeDescSortData: {
      type: Array,
      default: () => []
    },
    realTimeSortStudentData: {
      type: Array,
      default: () => []
    },
    realTimeWordNumData: {
      type: Object,
      default: () => {
        return {
          total: 0,
          complete: 0,
          scope1: 0,
          scope2: 0,
          scope3: 0,
        }
      }
    },
    countDownTime: {
      type: String,
      default: ''
    },
    realTimeCourseAverageScore: {
      type: Number,
      default: 0
    },
  })
  const formatNowDate = ref(format(new Date(), 'yyyy年MM月dd日'))
  const userInfo = computed(() => {
    return useUserStore().getUserInfo;
  });

  const emits = defineEmits(['close', 'confirm']);
  function close() {
    emits('close');
  }
  function confirm() {
    emits('confirm');
  }
</script>

<style scoped lang="less">
  .course-result-wrap {
    display: flex;
    height: 100%;
  }
  .wrap-left {
    width: 380px;
    margin-right: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .date {
      color: #1e232b;
      font-size: 36px;
      line-height: 42px;
    }
    .label {
      color: #9ba2aa;
      font-size: 21px;
    }
    .flag-wrap {
      width: 380px;
      height: 496px;
      background: url('@/assets/img/pennant.png') center center no-repeat;
      background-size: 380px 496px;
      display: flex;
      flex-direction: column;
      //justify-content: center;
      align-items: center;
      color: #fff;
      padding-top: 72px;
      .score-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 285px;
        height: 66px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        border: 2px solid rgba(255, 255, 255, 0.6);
        margin-bottom: 24px;
        .score-item {
          display: flex;
          align-items: center;
          margin: 0 10px;
          img {
            width: 24px;
            height: 24px;
            margin-right: 6px;
          }
        }
      }
      .num {
        font-size: 72px;
        font-weight: 600;
        line-height: 84px;
        margin-bottom: 32px;
      }
      .txt {
        font-size: 21px;
      }
    }
  }
  .wrap-right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .good-wrap,
    .ranking-wrap,
    .analysis-wrap {
      background: linear-gradient(#fffcf9 0%, #fff 100%);
      border-radius: 12px;
      border: 2px solid #e6eaed;
      padding: 20px;
      .wrap-title {
        font-size: 24px;
        color: #1e232b;
        margin-bottom: 16px;
      }
    }
    .good-wrap {
      width: 100%;
      height: 220px;

      .handwriting-wrap {
        display: flex;
        .handwriting-item {
          margin-right: 36px;
        }
      }
    }

    .ranking-wrap {
      width: 410px;
      height: 540px;
      .ranking-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #e6eaed;
        &:last-child {
          border-bottom: none;
        }
        .no {
          width: 36px;
          height: 36px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #9ba2aa;
          font-size: 24px;
          &.no-1 {
            background: url('@/assets/img/rank-1.png') center center no-repeat;
            background-size: 100% 100%;
          }
          &.no-2 {
            background: url('@/assets/img/rank-2.png') center center no-repeat;
            background-size: 100% 100%;
          }
          &.no-3 {
            background: url('@/assets/img/rank-3.png') center center no-repeat;
            background-size: 100% 100%;
          }
        }
        .info {
          flex: 1;
          display: flex;
          align-items: center;
          margin: 0 10px;
          color: #1e232b;
          font-size: 21px;
          .avatar {
            margin-right: 10px;
          }
        }
        .score {
          display: flex;
          align-items: center;
          color: #1e232b;
          font-size: 21px;
          img {
            width: 22px;
            height: 22px;
            margin-left: 6px;
          }
        }
      }
    }
    .analysis-wrap {
      width: 1020px;
      height: 540px;
      .label {
        font-size: 22px;
        color: #9ba2aa;
      }
      .analysis-item {
        padding: 18px;
        border-bottom: 1px solid #e6eaed;
        display: flex;
        align-items: center;
        .text {
          flex: 1;
          margin-left: 90px;
          font-size: 21px;
          line-height: 32px;
          color: #1e232b;
          span:last-child{
            .dh{
              display: none;
            }
          }
        }
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
</style>
